import ParticleSystem from './particles.js';

// 景点详细数据
const landscapeDetails = {
    1: {
        name: '黄山',
        address: '安徽省黄山市黄山区',
        description: '黄山以奇松、怪石、云海、温泉"四绝"著称，是中国十大名山之一。景区内有72峰，主要景点包括光明顶、始信峰、莲花峰等。',
        images: [
            'images/huangshan/main.jpg',
            'images/huangshan/1.jpg',
            'images/huangshan/2.jpg',
            'images/huangshan/3.jpg'
        ],
        bestTime: '春季（3-5月）和秋季（9-11月）是观赏黄山的最佳时节。春季可以欣赏到山花烂漫，秋季则可以观赏到层林尽染的美景。',
        transportation: `
            <h3>交通方式：</h3>
            <ul>
                <li>飞机：黄山屯溪国际机场，距离景区约1小时车程</li>
                <li>火车：黄山北站（高铁），有专线巴士到达景区</li>
                <li>汽车：黄山市汽车站有直达景区的班车</li>
            </ul>
        `,
        ticketInfo: `
            <div class="ticket-item">
                <h3>门票价格</h3>
                <p>旺季（3月1日-11月30日）：230元/人</p>
                <p>淡季（12月1日-次年2月末）：150元/人</p>
            </div>
            <div class="ticket-item">
                <h3>缆车价格</h3>
                <p>单程：80元/人</p>
                <p>往返：150元/人</p>
            </div>
        `,
        recommendations: [
            {
                name: '宏村',
                image: 'images/hongcun.jpg',
                description: '世界文化遗产，徽派建筑的代表',
                distance: '约40公里'
            },
            {
                name: '西递',
                image: 'images/xidi.jpg',
                description: '古徽州文化的活化石',
                distance: '约45公里'
            }
        ]
    }
    // 可以添加更多景点数据...
};

// 获取URL参数
function getUrlParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}

// 加载景点详情
function loadLocationDetails() {
    const id = getUrlParam('id');
    const details = landscapeDetails[id];
    
    if (!details) {
        showError('未找到该景点信息');
        return;
    }

    document.title = `${details.name} - 中国风景之美`;
    document.getElementById('locationName').textContent = details.name;
    document.getElementById('locationAddress').textContent = details.address;
    document.getElementById('description').textContent = details.description;
    document.getElementById('bestTime').innerHTML = details.bestTime;
    document.getElementById('transportation').innerHTML = details.transportation;
    document.getElementById('ticketInfo').innerHTML = details.ticketInfo;

    // 加载主图
    const mainImage = document.getElementById('mainImage');
    mainImage.src = details.images[0];
    mainImage.alt = details.name;

    // 加载缩略图
    loadThumbnails(details.images);

    // 加载推荐景点
    loadRecommendations(details.recommendations);
}

// 加载缩略图
function loadThumbnails(images) {
    const container = document.querySelector('.thumbnail-container');
    container.innerHTML = images.map((image, index) => `
        <div class="thumbnail" onclick="changeMainImage('${image}')">
            <img src="${image}" alt="缩略图 ${index + 1}">
        </div>
    `).join('');
}

// 切换主图
window.changeMainImage = function(src) {
    const mainImage = document.getElementById('mainImage');
    mainImage.style.opacity = '0';
    setTimeout(() => {
        mainImage.src = src;
        mainImage.style.opacity = '1';
    }, 300);
};

// 加载推荐景点
function loadRecommendations(recommendations) {
    const container = document.getElementById('recommendations');
    container.innerHTML = recommendations.map(rec => `
        <div class="recommendation-card">
            <img src="${rec.image}" alt="${rec.name}">
            <div class="card-content">
                <h3>${rec.name}</h3>
                <p>${rec.description}</p>
                <p class="distance"><i class="fas fa-map-marker-alt"></i> ${rec.distance}</p>
            </div>
        </div>
    `).join('');
}

// 显示错误信息
function showError(message) {
    const container = document.querySelector('.detail-container');
    container.innerHTML = `
        <div class="error-message">
            <i class="fas fa-exclamation-circle"></i>
            <p>${message}</p>
            <a href="index.html" class="back-button">返回首页</a>
        </div>
    `;
}

// 初始化页面
document.addEventListener('DOMContentLoaded', () => {
    // 初始化粒子动画
    const canvas = document.getElementById('particleCanvas');
    new ParticleSystem(canvas);

    // 加载景点详情
    loadLocationDetails();
}); 